<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>Docker自动构建部署平台</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/materialize/0.97.0/css/materialize.min.css">
    <link href="/css/icon.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/materialize/0.97.0/js/materialize.min.js"></script>
    <style>
        td {
            text-align: center !important;
        }

        .terminal {
            float: left;
            border: #000 solid 5px;
            font-family: Consolas;
            font-size: 14px;
            color: #f0f0f0;
            background: #000;
        }

        .terminal-cursor {
            color: #000;
            background: #f0f0f0;
        }

        .myterm {
            height: 100%;
            width: 100%;
            background: black;
            position: fixed;
            z-index: 10000;
            color: white;
            display: none;
        }

        .mytem-close {
            cursor: pointer;
            position: absolute;
            right: 10px;
        }

        #myterm-title {
            text-align: center;
        }

    </style>
</head>
<body style="font-family: 'Roboto', 'Droid Sans Fallback', '微软雅黑'; min-height: 100vh;display: flex;flex-direction: column;">

<nav>
    <div class="nav-wrapper">
        <a href="/" class="brand-logo center">Docker自动化构建部署平台</a>
        <ul class="left hide-on-med-and-down">
            <li><a href="/">首页</a></li>
        </ul>
    </div>
</nav>

<div id="term" class="myterm">
    <div id="myterm-title"><span id="my-title"></span><span class="mytem-close" onclick="closeTerm()">关闭<span></div>
    <div id="myterm-content"></div>
</div>


<div id="alert-modal" class="modal">
    <div class="modal-content">
        <p class="grey-text">提示</p>
        <p class="text-alert"></p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
</div>

<div class="container" style="padding-top: 20px; width: 90%;flex: 1 0 auto;">
    <div class="row">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s6"><a href="#java-deploy">容器列表</a></li>
            </ul>
        </div>
    </div>

    <div id="java-deploy">
        <table class="hoverable">
            <thead>
            <tr>
                <td width="20%">容器ID</td>
                <td width="20%">命令</td>
                <td width="20%">状态</td>
                <td width="20%">运行状态</td>
                <td width="20%">操作</td>
            </tr>
            </thead>
            <tbody>

            <#list container as item>
            <tr>
                <td class="showId">${item.id}</td>
                <td>
                    ${item.command}
                </td>
                <td>
                    ${item.status}
                </td>
                <td>
                    ${item.state}
                </td>
                <td>
                    <a href="/docker/containerStart/${item.id}"
                       class="btn waves-effect waves-light red lighten-2">启动</a>
                    <a href="/docker/containerStop/${item.id}"
                       class="btn waves-effect waves-light red lighten-2">停止</a>
                    <a href="/docker/containerDel/${item.id}"
                       class="btn waves-effect waves-light red lighten-2">删除</a>
                    <a href="#" onclick="term('${item.id}')"
                       class="btn waves-effect waves-light red lighten-2">容器终端</a>
                </td>
            </tr>
            </#list>
            </tbody>
        </table>
    </div>

</div>

<script src="/js/term.js"></script>
<script>

    <#if error?exists>
    Materialize.toast('${error}', 6000)
    </#if>

    $(".showId").each(function () {
        var id = $(this).text();
        var sub = id.substr(0, 30);
        $(this).text(sub);
    });

    var socket = null;

    function closeTerm() {
        if (socket != null) {
            socket.close();
        }
        socket = null;
        $("#term").hide(1000);
    }

    function term(id) {
        $("#my-title").text("容器ID：" + id);
        $("#term").show(1000);
        var term = null;
        var url = "ws://" + location.host + "/stream?id=" + id;
        socket = new WebSocket(url);
        socket.onopen = function () {
            term = new Terminal({
                cols: 130,
                rows: 80,
                cursorBlink: false
            });
            term.open(document.getElementById("myterm-content"));
            term.on('data', function (data) {
                socket.send(data);
            });
            socket.onmessage = function (data) {
                term.write(data.data);

            };
            socket.onclose = function () {
                term.write("Connection closed.");
                term.close();
            };
        };
    }


</script>

</body>
</html>